<template>
  <div class="message_item_div">
    <a-avatar :size="50" :src="friend.avatar" v-show="!isSender"/>
    <div class="main_container" :style="{alignItems:isSender?'flex-end':'flex-start'}">
      <span class="content" :style="{backgroundColor:isSender?'#1da57a10':'#00000010'}">
        {{ message.content }}
      </span>
      <span class="time">
        {{ message.createdTime }}
      </span>
    </div>
    <a-avatar :size="50" :src="user.avatar" v-show="isSender"/>
  </div>
</template>

<script>
import { computed, defineComponent, reactive, toRefs } from 'vue'
import { useStore } from 'vuex'

export default defineComponent({
  props: {
    message: {
      type: Object,
      default () {
        return {
          id: '',
          senderId: '',
          receiverId: '',
          type: '',
          content: '',
          createdTime: ''
        }
      }
    },
    friend: {
      type: Object,
      default () {
        return {
          id: '',
          name: '',
          domain: '',
          avatar: ''
        }
      }
    }
  },
  setup (props) {
    const store = useStore()
    const state = reactive({
      user: computed(() => store.getters.user),
      isSender: computed(() => props.message.receiverId === props.friend.id)
    })

    return {
      ...toRefs(state)
    }
  }
})
</script>

<style lang="less" scoped>
.message_item_div {
  width: 100%;
  display: flex;
  justify-content: space-around;

  & .main_container {
    width: 92%;
    display: flex;
    flex-direction: column;

    & .content {
      padding: 10px;
    }

    & .time {
      font-size: 12px;
      padding-top: 5px;
      color: #00000080;
    }
  }
}
</style>
